//滑屏导航
(function(){
	var scollWrap=document.querySelector('.scrollWrap'),
		inner=document.querySelector('.inner');	
	var startPointX=0,//按下时手指的坐标
	    startLeft=0,//按下元素的位置
		movePointX=0;//坐标点移动的距离
	inner.style.transform='translateX(0px)';//为了在下面能用js取到移动的距离
	scollWrap.addEventListener('touchstart',function(ev){
		//changedTouches 触发当前事件的手指列表
		startPointX=ev.changedTouches[0].pageX;
		startLeft=parseInt(inner.style.transform.split('(')[1]);
	});
	scollWrap.addEventListener('touchmove',function(ev){
		movePointX=ev.changedTouches[0].pageX-startPointX;//手指移动的距离
		var x=movePointX+startLeft;//元素走的位置
		if(x >=0){//左边到头
			x=0;
		}else if(x <= scollWrap.offsetWidth-inner.offsetWidth){
		   x=scollWrap.offsetWidth-innerWidth;
		}
		inner.style.transform='translateX('+x+'px)';
		ev.preventDefault();//左右拖动的时候会触发滚动条上下		
	});
})();
//折叠导航
(function(){
	var more=document.querySelector('.channel .more span'),
	channel=document.querySelector('.channel'),
	shadow=document.querySelector('.shadow'),
	inner=document.querySelector('.inner');
    var shrink=true;//用来决定内容是否展开
	more.addEventListener('touchend',function(){
		if(shrink){//展开
			channel.classList.add('blockChannel');
			shadow.style.display='block';
			inner.style.transform='translateX(0)';
		}else{//收缩
			channel.classList.remove('blockChannel');
			shadow.style.display='none';
		}
		shrink=!shrink;
		
	});
	//阻止拖动遮罩层的时候滚动会走
	shadow.addEventListener('touchstart',function(ev){
		ev.preventDefault();
	});
})();

//轮播图
(function(){
	/* querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 */
	var banner=document.querySelector('.banner'),
		wrap=document.querySelector('.wrap'),
		circles=document.querySelectorAll('.banner .circle span'),
		imgWidth=banner.offsetWidth;//offsetWidth 水平方向 width + 左右padding + 左右border-width
	var startPointX=0,//按下时手指的坐标
		startLeft=0,//按下时元素的位置
		movePointX=0,//坐标点的移动
		cn=0,//当前的索引值
		ln=0;//上一个索引值
		timer=null;
		
	//初始化
	wrap.innerHTML+=wrap.innerHTML;
	var len=wrap.children.length;
	wrap.style.width=len*100+'vw';
	wrap.style.transform='translate(0px)';//为了在下面能用js取到移动距离
	
	//手指按下
	banner.addEventListener('touchstart',function(ev){
		clearInterval(timer);
		wrap.style.transition='null';
		if(cn==0){//按下是第一张图片,往右走,会出现空白
		cn=len/2; //第2份的第一张		
		}
		if(cn ==len-1){//按下的是最后一张图片,如果往左走,那就会出现空白
		cn=len/2-1;
		}
		wrap.style.transform='translate('+ -cn*imgWidth+'px)';
		
		startPointX=ev.changedTouches[0].pageX;//按下鼠标离我可视区的距离
		startLeft=parseInt(wrap.style.transform.split('(')[1]);//盒子移动的距离
		
	});
	//手指移动
	banner.addEventListener('touchmove',function(ev){
		movePointX=ev.changedTouches[0].pageX-startPointX;//手指移动的距离
		var x=movePointX+startLeft;//元素走的位置
		wrap.style.transform='translateX('+x+'px)';
		
		ev.preventDefault();//避免左右滚动时,滚动条滚动
		
	});
	//手指抬起
	banner.addEventListener('touchend',function(ev){
		movePointX=ev.changedTouches[0].pageX-startPointX;//手指移动距离
		
		var backWidth=imgWidth/8;//回弹的距离,只有超过这个距离图片才会切换
		if(Math.abs(movePointX)>backWidth){
			/* 
			拖动时cn的变化
			 1.movePointX为正值代表往右拖,往右拖要显示上一张图,cn要减
			  1.movePointX为负值代表往右拖,往右拖要显示上一张图,cn要加
			 */
			cn -= movePointX/Math.abs(movePointX);
		}
		//图片运动
		wrap.style.transition='.3s';
		wrap.style.transform='translateX('+ -cn*imgWidth +'px)';
	
	
		//小圆点切换
		/* 
		 cn:0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
		 cn%8:0 1 2 3 4 5 6 7
		 */
		var hn=cn%(len/2);//cn模的一半
		circles[ln].className='';
		circles[hn].className='active';
		ln=hn;
		timer=setInterval(move,3000);
	}); 
	//图片运动函数
	function move(){
		cn++;
		wrap.style.transition='.3s';
		wrap.style.transform='translateX('+ -cn*imgWidth +'px)';
		//处理无缝滚动
		wrap.addEventListener('transitionend',function(){
			if(cn >= len-1){
			   cn=len/2-1;
			}
			wrap.style.transition='null';
			wrap.style.transform='translateX('+ -cn*imgWidth+'px)';
		});
		var hn=cn%(len/2);//cn%cn的一半
		circles[ln].className='';
		circles[hn].className='active';
		ln=hn;
	}
	timer=setInterval(move,3000);
})();


//回到顶部
(function(){
	var backTop=document.querySelector('.backTop');
	window.onscroll=function(){
		var top=window.pageYOffset;//滚动条走的距离
		backTop.style.opacity = top > 600?1:0;
	};
	backTop.addEventListener('touchend',function(){
		window.scrollTo(0,0);//回到顶部
	});
})();
